<template>
  <canvas class="full" id="dxmcv"></canvas>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ElNotification } from 'element-plus'

const props = defineProps({
  tp: {
    type: Number,
    default: 1
  },
  vid:String
});
const emit = defineEmits(["close"]);
const state = reactive({
  ctx: null,
  data: [],
  mvp: {},
  ismv: false,
  stop:false
});

const init = () => {
  let canvas = document.getElementById('dxmcv')
  canvas.width = document.documentElement.clientWidth
  canvas.height = document.documentElement.clientHeight
  let ctx = canvas.getContext('2d')
  let image = new Image()
  image.src = '/images/add/addpoint.png'


  canvas.addEventListener('contextmenu', function (e) {
    e.preventDefault();
    state.ismv = false;

    if (props.tp == 1 && state.data.length < 1) {
      ElMessage.error('请选择一个点')
      return
    }
    if (props.tp == 2 && state.data.length < 2) {
      ElMessage.error('至少选择二个点')
      return
    }
    if (props.tp == 3 && state.data.length < 3) {
      ElMessage.error('至少选择三个点')
      return
    }
    if (props.tp == 3) {
      state.data.push({...state.data[0]})
    }
    
    setTimeout(() => {
      state.stop = true
      let w = document.documentElement.clientWidth
      let h = document.documentElement.clientHeight
      //传递参数
      let store = useMyStore()
      store.params.dxm = {vid:props.vid,type:props.tp,data:state.data,ptz:store.params.ptz,w,h}
      emit('close', state.data)
    }, 300);
  });

  canvas.addEventListener('click', function (e) {
    if(state.stop) return; //停止响应
    if (props.tp == 1) {
      state.data[0] = { x: e.pageX, y: e.pageY }
    } else {
      state.ismv = true
      state.data.push({ x: e.pageX, y: e.pageY })
    }
  })
  canvas.addEventListener('mousemove', function (e) {
    if(state.stop) return; //停止响应
    state.mvp = { x: e.pageX, y: e.pageY }
  })

  function drawPoint(x, y, r) {
    ctx.beginPath();
    // ctx.arc(x, y, r, 0, Math.PI * 2);
    // ctx.fillStyle = "red";
    // ctx.fill();
    ctx.drawImage(image, x - 24, y - 48, 64, 92);
    if (state.ismv) {
      ctx.moveTo(x, y)
      ctx.lineTo(state.mvp.x, state.mvp.y)
      ctx.strokeStyle = "#2EE3FFFF";
      ctx.lineWidth = 4;
      ctx.stroke();
    }
    ctx.closePath();
  }

  function drawLine(list) {
    ctx.beginPath();
    ctx.moveTo(list[0].x, list[0].y)
    for (let i = 1; i < list.length; i++) {
      ctx.lineTo(list[i].x, list[i].y)
    }
    if (state.ismv) {
      ctx.lineTo(state.mvp.x, state.mvp.y)
    }
    ctx.strokeStyle = "#2EE3FFFF";
    ctx.lineWidth = 3;
    ctx.stroke();
    if (props.tp == 3){
      ctx.fillStyle = "#2EE3FF33";
      ctx.fill();
    }
    ctx.closePath();
  }

  //动画与连线
  var requestAnimFrame = requestAnimationFrame || webkitRequestAnimationFrame || oRequestAnimationFrame || msRequestAnimationFrame;
  requestAnimFrame(animateUpdate); // 兼容不同浏览器的requestAnimationFrame

  function animateUpdate() {
    if(state.stop) return; //停止响应
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空canvas中原有的内容

    if (props.tp == 1) {
      if (state.data.length > 0) {
        drawPoint(state.data[0].x, state.data[0].y, 5)
      }
    } else {
      if (state.data.length == 1) {
        drawPoint(state.data[0].x, state.data[0].y, 3)
      }
      else if (state.data.length > 1) {
        drawLine(state.data)
      }
    }
    requestAnimFrame(animateUpdate);
  }
}
onMounted(() => {
  setTimeout(() => {
    init()
  }, 200);

  ElNotification({
    title: '操作提示',
    message: "左键选点，右键结束选择",
    position: 'bottom-right',
  })
  //ElMessage.info('左键选点，右键结束！')
})
</script>

<style lang="scss" scoped></style>